// 引入CountUI组件到容器中
import CountUI from "../../components/Count/Count";
// connect连接UI组件与redux
import { connect } from "react-redux";

import {
  createAddAction,
  createDeleteAction,
  createAsyncAddAction,
} from "../../redux/count_action";

/**
 * 1、mapStateToProps函数返回一个对象
 * 2、返回的对象中key就作为传递给UI组件props的key，value就作为传递给UI组件props的value
 * 3、mapStateToProps用于传递状态
 */
// function mapStateToProps(store) {
//   return {
//     count: store,
//   };
// }

/**
 * 1、mapDispatchToProps函数返回一个对象
 * 2、返回的对象中key就作为传递给UI组件props的key，value就作为传递给UI组件props的value
 * 3、mapDispatchToProps用于传递操作状态的方法
 * 4、mapDispatchToProps也可以是一个对象
 */
// function mapDispatchToProps(dispatch) {
//   return {
//     add: (data) => dispatch(createAddAction(data)),
//     delete: (data) => dispatch(createDeleteAction(data)),
//     asyncAdd: (data, delay) => dispatch(createAsyncAddAction(data, delay)),
//   };
// }

// 使用connect()()创建并暴露一个Count的容器组件
// 简写方式
export default connect((store) => ({ count: store }), {
  add: createAddAction,
  delete: createDeleteAction,
  asyncAdd: createAsyncAddAction,
})(CountUI);
